<template>
  <q-dialog v-model="show" @hide="handleClose">
    <q-card style="min-width: 500px; max-width: 600px; max-height: 80vh">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">帮助与反馈</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <q-card-section class="q-pt-none">
        <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" align="left">
          <q-tab name="help" label="帮助" icon="help" />
          <q-tab name="feedback" label="反馈" icon="feedback" />
        </q-tabs>
        <q-separator />
      </q-card-section>

      <q-card-section class="q-pt-none" style="max-height: calc(80vh - 150px); overflow-y: auto">
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="help">
            <div class="text-h6 q-mb-md">常见问题</div>
            <div class="q-gutter-md">
              <div>
                <div class="text-subtitle2 q-mb-sm">如何添加好友？</div>
                <div class="text-body2 text-grey-7">
                  在好友列表中点击"添加好友"按钮，输入对方的用户ID或用户名进行搜索，然后发送好友请求。
                </div>
              </div>
              <q-separator />
              <div>
                <div class="text-subtitle2 q-mb-sm">如何创建群组？</div>
                <div class="text-body2 text-grey-7">
                  在群组列表中点击"创建群组"按钮，输入群组名称并选择成员，即可创建群组。
                </div>
              </div>
              <q-separator />
              <div>
                <div class="text-subtitle2 q-mb-sm">如何发送文件？</div>
                <div class="text-body2 text-grey-7">
                  在聊天输入框中点击文件图标，选择要发送的文件即可。支持图片、文档等多种格式。
                </div>
              </div>
              <q-separator />
              <div>
                <div class="text-subtitle2 q-mb-sm">如何修改个人信息？</div>
                <div class="text-body2 text-grey-7">
                  点击左侧菜单栏底部的头像，选择"修改个人信息"即可编辑昵称、头像、个性签名等信息。
                </div>
              </div>
            </div>
          </q-tab-panel>

          <q-tab-panel name="feedback">
            <div class="text-h6 q-mb-md">意见反馈</div>
            <q-form @submit="handleSubmitFeedback" class="q-gutter-md">
              <q-select
                v-model="feedbackForm.type"
                :options="feedbackTypes"
                label="反馈类型"
                outlined
                emit-value
                map-options
              />
              <q-input
                v-model="feedbackForm.content"
                label="反馈内容"
                outlined
                type="textarea"
                rows="5"
                autocomplete="off"
                :rules="[val => !!val || '请输入反馈内容', val => val.length >= 10 || '反馈内容至少10个字符']"
              />
              <q-input
                v-model="feedbackForm.contact"
                label="联系方式（可选）"
                outlined
                autocomplete="off"
                hint="方便我们联系您"
              />
              <q-btn
                flat
                label="提交反馈"
                color="primary"
                type="submit"
                :loading="submitting"
                class="full-width"
              />
            </q-form>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useQuasar } from 'quasar'

const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const $q = useQuasar()
const show = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
})

const tab = ref('help')
const submitting = ref(false)

const feedbackForm = ref({
  type: 'bug',
  content: '',
  contact: '',
})

const feedbackTypes = [
  { label: 'Bug 报告', value: 'bug' },
  { label: '功能建议', value: 'suggestion' },
  { label: '使用问题', value: 'question' },
  { label: '其他', value: 'other' },
]

const handleSubmitFeedback = async () => {
  if (!feedbackForm.value.content || feedbackForm.value.content.length < 10) {
    $q.notify({
      type: 'negative',
      message: '反馈内容至少需要10个字符',
    })
    return
  }

  submitting.value = true
  try {
    // 这里应该发送到服务器，现在先保存到 localStorage
    const feedbacks = JSON.parse(localStorage.getItem('feedbacks') || '[]')
    feedbacks.push({
      ...feedbackForm.value,
      timestamp: new Date().toISOString(),
    })
    localStorage.setItem('feedbacks', JSON.stringify(feedbacks))
    
    $q.notify({
      type: 'positive',
      message: '反馈已提交，感谢您的反馈！',
    })
    
    // 重置表单
    feedbackForm.value = {
      type: 'bug',
      content: '',
      contact: '',
    }
    
    handleClose()
  } catch (error: any) {
    $q.notify({
      type: 'negative',
      message: error.message || '提交失败',
    })
  } finally {
    submitting.value = false
  }
}

const handleClose = () => {
  show.value = false
}
</script>

<style scoped>
</style>

